<template>
	<view class="center">
		<!-- 导航 -->
		<uni-nav-bar  
		backgroundColor="#fff" 
		class="tabber" 
		color="#666"  
		left-icon="back"  
		@clickRight="showMenu" 
		@clickLeft="welcome">
				<view class="title"></view>
			    <view slot="left" class=""></view>
			    <view slot="right" class="ai-center"> <uni-icons type="more-filled" size="44" color="#666"></uni-icons> </view>
		</uni-nav-bar>
		<!-- 小meune -->
		<chunLei-popups 
		theme="light" 
		v-model="value" 
		:popData="menu" 
		@tapPopup="tapPopup" 
		:x="344" :y="30" 
		placement="top-end">
		</chunLei-popups>
		
		
		<!-- 中间正文-->
		<book-translation :Bookid="Bookid" :readTime="readTime" ></book-translation>
		
		
		<!-- 底部 -->
		<cmd-bottom-nav
		class="bottomBox"
		:current="current" 
		:list="list" 
		border-color="#ffff" 
		background-color="#4CD964" 
		font-color="#fff" 
		active-font-color="#ffff"
		@tap="click"
		></cmd-bottom-nav>
		
		<!-- 列表菜单选项卡 -->
		<uni-drawer ref="showDrawer"  width='10'>
			<view style="padding:30rpx;">
				<book-list :Bookid="Bookid" ></book-list>
			</view>
		</uni-drawer>
		
		<!-- 进度条组件 -->
		<book-time id="booktime" ref="booktime" class="booktime"></book-time>
		<!-- 字体大小调节组件  以及亮度调节选项 -->
		<book-setting id="bookseting"  ref="bookseting" class="bookseting"></book-setting>
		
		<!-- 夜间模式 直接点击某个东西就好，去调节背景颜色就好了-->
		
	</view>
</template>

<script>
	
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import  bookTranslation from '@/components/book-reader/book-translation.vue'
	import  bookList from '@/components/book-reader/book-list.vue'
	import bookTime from '@/components/book-reader/book-time.vue'
	import bookSetting from '@/components/book-reader/book-setting.vue'
	
	export default {
		onLoad(option) {
					console.log(option.id); //打印出上个页面传递的参数。
					this.Bookid = parseInt(option.id)
		},
		components: {
			chunLeiPopups,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			cmdBottomNav,
			bookTranslation,
			bookList,
			bookSetting,
			bookTime,
			
			
			
		},
		created() {
			console.log(this.$store)
			console.log(this.Bookid)
			
		},
		mounted() {
			this.readTime =  this.$refs.booktime
			console.log(this.readTime)
		},
		data() {
			return {
				// isShowBaner1:true,
				readTime:null,
				Bookid:null,
				isShowBaner:null,
				isShowBaner2:true,
				value: false,
				menu: [{
					title:'搜索',
					icon:'/static/image/shelf/zhifeiji.png'
				},{
					title:'书籍详情',
					icon:'/static/image/shelf/zhifeiji.png'
				}],
				current: 0,
				list:[{
				    "pagePath": "/pages/tabbar/home/home",
				    "text": "目录", 
					"icon":'bullet-list'
				},
				{
				    "pagePath": "/pages/tabbar/home/home",
				    "text": "进度", 
				    "icon": "clock",
				},
				{
				    "pagePath": "/pages/tabbar/home/home",
				    "text": "设置", 
				    "icon": "equalizer",
				},
				{
				    "pagePath": "/pages/tabbar/home/home",
				    "text": "夜间", 
				    "icon": "lightning-bolt",
				},
				]
			}
		},
		methods: {
			showDranMune(ele){
				console.log(ele)
				let el = document.querySelector(ele)
				console.log(el)
				this.$animationUtils.Animation(el,{"bottom":0,})
			},
			hidden(ele) {
					let el = document.querySelector(ele)
					this.$animationUtils.Animation(el,{"bottom":-140,})
			},
			showMenu() {
				this.value = !this.value
			},
			welcome(){
				uni.navigateBack({
					
				})
			},
			click(value){
				switch( value.select ){
					case 0 :
						this.$refs.showDrawer.open()
					  break;
					case 1 :
							// 我们使用一个标识去存，当前所点击的面板，初始化的值是null ，第一次点击就设置成当前的面板id ，如果你是第二次点击原来的面板，那就说明true，turw就走别的地方，这就实现了点击两次的切换；
							// 如果你当前的展开的面板，就说明此时的标识是当前面板的，而这个时候你再点击B那么判断标识为flase就进别的地方，隐藏当前，顺便展示B 并且把表示设置成B
							if( this.isShowBaner != this.$refs.booktime){
								this.isShowBaner = this.$refs.booktime
								this.hidden('#bookseting')
								this.showDranMune('#booktime')
							}else{
								this.hidden('#booktime')
								this.isShowBaner = null
							}
					
						// if(this.isShowBaner1){
						// 	this.hidden('#bookseting')
						// 	this.showDranMune('#booktime')
						// 	this.isShowBaner1 = !this.isShowBaner1
						// }else{
						// 	this.hidden('#booktime')
						// 	this.isShowBaner1 = !this.isShowBaner1
						// }	
						
					  break;
					case 2 :
						
						if( this.isShowBaner != this.$refs.bookseting){
							this.isShowBaner = this.$refs.bookseting
							this.hidden('#booktime')
							this.showDranMune('#bookseting')
						}else{
							this.hidden('#bookseting')
							this.isShowBaner = null
						}
						
				
					  break;
					case 3 :
					
					  break;
					
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
.body{
	/*距离顶部范围应该在118-122范围内*/
	padding-bottom: 118upx;
}
// 大组件的
.center{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
// 底部功能菜单
.bottomBox{
	z-index: 1004;
}
// 显示隐藏底部菜单的各种操作
.booktime{
	position: absolute;
	width: 100%;
	background-color: #4CD964;
	bottom: -140px;
}
.bookseting{
	position: absolute;
	width: 100%;
	background-color:pink;
	bottom: -140px;
}

</style>



